<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/common.jsp" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>"> 
    <title>添加挂号界面</title>  
    <link rel="stylesheet" href="<%=path %>/plugins/layui/css/layui.css" media="all">
  </head>

  <script src="<%=path %>/plugins/layui/layui.js"></script>
  
  <body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>填写挂号信息</legend>
</fieldset>
<form class="layui-form layui-form-pane" id="studentForm" lay-filter="example" action="">

  <div class="layui-form-item">
    <label class="layui-form-label">学生学号</label>
    <div class="layui-input-inline">
      <input type="text" name="stuId" lay-verify="stuId" lay-filter="userId" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">学生姓名</label>
    <div class="layui-input-inline">
      <input type="text" name="stuName" lay-verify="stuName" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">年龄</label>
    <div class="layui-input-inline">
      <input type="text" name="stuAge" lay-verify="stuAge" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">医保类型</label>
    <div class="layui-input-block">
      <select name="careType" lay-filter="careType" lay-verify="required">
        <option value=""></option>
        <option value="农村合作医疗" selected="">农村合作医疗</option>
        <option value="城镇医疗" >城镇医疗</option>
      </select>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">挂号类型</label>
    <div class="layui-input-block">
      <select name="regType" lay-filter="regType" lay-verify="required">
        <option value=""></option>
        <option value="外科" selected="">外科</option>
        <option value="内科" >内科</option>
      </select>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">学生学籍</label>
    <div class="layui-input-inline">
      <select name="stuGrade" lay-verify="required">
        <option value="">请选择年级</option>
        <option value="2013" selected="">2013级</option>
		<option value="2014" selected="">2014级</option>
		<option value="2015" selected="">2015级</option>
		<option value="2016" selected="">2016级</option>
		<option value="2017" selected="">2017级</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="stuCollege" lay-verify="required">
        <option value="">请选择学院</option>
        <option value="信息与电子工程学院">信息与电子工程学院</option>
        <option value="马克思学院" disabled="">马克思学院</option>
        <option value="文法学院">文法学院</option>
        <option value="师范学院">师范学院</option>
        <option value="经济与管理学院">经济与管理学院</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="stuMajor" lay-verify="required">
        <option value="">请选择专业</option>
        <option value="软件工程">软件工程</option>
        <option value="数字媒体">"数字媒体"</option>
        <option value="电本">电本</option>
      </select>
    </div>
  </div>

  <div class="layui-form-item" pane="">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" name="stuSex" value="男" title="男" checked="">
      <input type="radio" name="stuSex" value="女" title="女">
      <input type="radio" name="stuSex" value="禁" title="禁用" disabled="">
    </div>
  </div>

  <div class="layui-form-item" align="center">
    <button class="layui-btn" lay-submit="" lay-filter="submit">保存信息</button>
  </div>
  </form>
</body>
  
<script>
layui.use(['form', 'layedit', 'laydate', 'jquery'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate
  ,$ = layui.jquery;

  //日期
  laydate.render({
    elem: '#date'
  });
  
  //自定义验证规则
  form.verify({
    stuId: [/\b\d{12}\b/, '学号12位，只能是数字！']
    ,stuAge: [/\b\d{2}\b/, '请输入正确的年龄！']
    ,stuName: function(value){
    	if(value.length < 2  || value.length > 4){
    		return '请输入至少2位，至多为4位的姓名';
    	}
    } 
  });
  
  //监听提交
  form.on('submit(submit)', function(data){
 	$.ajax({
  		url: '<%=path%>/biz/Student_checkStuId.action',
  		type: 'GET',
  		data: {"stuId":data.field.stuId},
  		dataType: 'json',
  		success: function(data){ 
  			var json = eval("("+data+")");//将数据转换成json类
  			console.log(json.isSucceed);
  			//学号不存在
			if(!json.isSucceed){
				$.ajax({
					url: '<%=path%>/biz/Student_add.action',
					type: 'POST',
					data: $('#studentForm').serialize(),
					dataType: 'json',
					success: function(data){
						var json = eval("("+data+")");
						//添加成功
						if(json.isSucceed){
							message("添加成功~");
							//返回挂号列表
							location.href = "<%=path%>/biz/Student_studentList.action";
						}else{
							message("添加失败~不解释");
							//关闭当前iframe弹出层
							parent.layer.close();
						}
					},
					error: function(data){
						layer.msg("请求失败");
					}
				});
			}
			//学号已存在
			if(json.isSucceed){
					message("此学号已存在了喔");
				}
  			},
  		error: function(data){
  			layer.msg("请求失败");
  		}
  	});
    return false;//阻止表单跳转
  });  
  
  //表单初始赋值
  form.val('example', {
    "stuId": "201600208416" // "name": "value"
    ,"stuName": "陆正荣"
    ,"stuAge": 21
    ,"stuMajor": "软件工程" 
    ,"stuCollege": "信息与电子工程学院"
  })
  
  //信息提示弹出层
  function message(data){
      layer.open({
        content: '<div style="padding: 20px 100px;">'+ data +'</div>'
        ,btn: '朕知道啦'
        ,btnAlign: 'c' //按钮居中
        ,shade: 0 //不显示遮罩
        ,yes: function(){
          layer.closeAll();
        }
      });
  }

  
  $('#layerDemo .layui-btn').on('click', function(){
    var othis = $(this), method = othis.data('method');
    active[method] ? active[method].call(this, othis) : '';
  });
  
});
</script>
</html>
